<template>
  <div class="body">
    <div class="top">
      <p>
        <van-icon name="arrow-left" class="aacon" size="20px" @click="tifh" />
      </p>
      <p>{{ CinemaAddressData.name }}</p>
      <p>
        <span v-for="itea in CinemaAddressData.services" :key="itea.description">{{ itea.name }}</span>
        <van-icon name="arrow" class="asdz" size="14px" />
      </p>
    </div>
    <div class="cenrenr">
      <p>
        <span>
          <van-icon name="location-o" class="asdz" size="26px" />
        </span>
        <span>{{ CinemaAddressData.address }}</span>
        <span>
          <van-icon name="phone-o" class="asdz" size="26px" />
        </span>
      </p>
      <div class="rotation">
        <swiper :options="swiperOption">
          <swiper-slide class="wgsa" v-for="(ite, idx) in RotationChart" :key="ite.filmId">
            <img :src="ite.poster" alt ref="img" class="sadasf" @click="qiehuan(ite, idx, $event)" />
          </swiper-slide>
        </swiper>
        <img src="https://s3.bmp.ovh/imgs/2021/08/a8daa2ec51524502.png" alt />
      </div>
    </div>
    <div class="qxidiv">
      <p>
        <span>{{ ite.name }}</span>
        <span>{{ ite.grade }}</span>
        <span>分</span>
      </p>
      <p>
        <span>{{ ite.category }}|</span>
        <span>{{ ite.runtime }}分钟|</span>
        <span>{{ arr[0] }}|</span>
        <span>{{ arr | hgszasd }}</span>
      </p>
      <van-icon name="arrow" class="asadz" size="14px" @click="Jump" />
    </div>
    <van-tabs v-model="active" @click="click">
      <van-tab :title="itea" v-for="itea in time" :key="itea" :name="itea">
        <div class="bottomdiv">
          <div class="chaci" v-for="ite1 in transformation" :key="ite1.scheduleId">
            <div class="left">
              <p>{{ ite1.showAt | kassj }}</p>
              <p>{{ ite1.endAt | kassj }}散场</p>
            </div>
            <div class="center">
              <p>
                <span>{{ ite1.filmLanguage }}</span>
                <span>{{ ite1.imagery }}</span>
              </p>
              <p>{{ ite1.hallName }}</p>
            </div>
            <div class="right">
              <p>
                <span>￥{{ ite1.salePrice | jsdj }}</span>
                <span>购票</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import moment from "moment";
import { CinemaDetails, CinemaAddress, FilmSessions } from "../api/api";
export default {
  props: [],
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        centeredSlides: true,
        slideToClickedSlide: true
      },
      // 轮播图数据
      RotationChart: {},
      // 影院地址数据
      CinemaAddressData: {},

      active: 1,
      idx: 0,
      arr: [],
      // 每条电影数
      ite: "",
      // 时间数据
      time: [],
      // 电影场次数据
      transformation: "",
      // 点击赋值的时间搓数据 默认为第一天数据
      title: "",
      dyid: ""
    };
  },
  computed: {},
  methods: {
    // 点击轮播图变化
    qiehuan(ite, idx, even) {
      this.idx = idx;
      this.$refs.img.forEach(ite => {
        ite.style.height = "104px";
        ite.style.width = "72px";
      });

      ite.actors.forEach(itea => {
        this.arr.push(itea.name);
      });
      this.arr = [];
      this.dyid = ite.filmId;
      this.FilmSes();
    },
    // 轮播图数据
    async hsuadu() {
      let a = window.location.search.substring(1);
      await CinemaDetails(a).then(res => {
        this.RotationChart = res.data.data.films;
        this.RotationChart[0].showDate.forEach(ite => {
          this.time.push(moment(ite * 1000).format("YYYY-MM-DD "));
        });
        this.title = this.RotationChart[0].showDate[0];
        console.log(this.title);
        this.dyid = this.RotationChart[0].filmId;
        this.FilmSes();
      });
    },
    // 电影地址数据
    CinemaAddresssd() {
      let a = window.location.search.substring(1);
      CinemaAddress(a).then(res => {
        this.CinemaAddressData = res.data.data.cinema;
      });
    },
    // 点击跳转时间并渲染新数据
    click(title) {
      var time1 = new Date(title).getTime() / 1000;
      this.title = time1;
      this.FilmSes();
    },
    // 获取电影场次数据
    FilmSes() {
      console.log(this.title);
      let a = window.location.search.substring(1);
      FilmSessions(a, this.dyid, this.title).then(res => {
        console.log(res);
        this.transformation = res.data.data.schedules;
        console.log(this.transformation);
      });
    },

    Jump() {
      console.log(this.ite.filmId);
      this.$router.push("/Detail?" + this.ite.filmId);
    },
    tifh() {
      this.$router.go(-1);
    }
  },
  components: {},
  filters: {
    hgszasd: function(val) {
      return val.join(" ");
    },
    kassj: function(val) {
      return moment(val * 1000).format("HH:mm");
    },
    jsdj: function(val) {
      return val / 100;
    }
  },
  watch: {},
  created() {
    this.hsuadu();
    this.CinemaAddresssd();
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {
    // 初始化默认电影名演员数据

    // console.log(this.RotationChart);
    let a = this.RotationChart[this.idx];
    a.actors.forEach(itea => {
      // console.log(itea);
      this.arr.push(itea.name);
    });
    // 吧每条数据赋值给ite
    this.ite = a;
    // 吧每条数据的时间赋值给time
  },
  updated() {
    // 默认第几个索引选中并放大
    this.$refs.img[this.idx].style.height = "120px";
    this.$refs.img[this.idx].style.width = "90px";
  },
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.top {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
}
.top p:nth-of-type(1) {
  margin: 10px 10px;
}
.top p:nth-of-type(2) {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}
.top p:nth-of-type(3) {
  width: 300px;

  text-align: center;
  margin: auto;
  position: relative;
}
.top p:nth-of-type(3) > .asdz {
  position: absolute;
  right: -22px;
  top: 4px;
}
.top p:nth-of-type(3) > span {
  font-size: 12px;
  border: 1px solid red;
  margin: 0 5px;
  padding: 0 5px;
  color: #ff6600;
  border-bottom: none;
}
.cenrenr > p {
  margin-top: 10px;
  position: relative;
}
.cenrenr > p > span:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 10px;
}
.cenrenr > p > span:nth-of-type(3) {
  position: absolute;
  top: 0;
  right: 20px;
}
.cenrenr > p > span:nth-of-type(2) {
  display: block;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: auto;
}
.cenrenr .rotation {
  width: 100%;
  height: 180px;
  margin-top: 15px;
  border: 1px solid rgb(255, 255, 255);
  position: relative;
  background-color: rgb(243, 225, 225);
}
.cenrenr .rotation > img {
  position: absolute;
  bottom: -5px;
  left: 42%;

  width: 25px;
  height: 20px;
}
.rotation {
  padding-top: 30px;
}
.wgsa {
  height: 120px;
  position: relative;
}
.sadasf {
  text-align: center;
  width: 72px;
  height: 104px;
  position: absolute;
  bottom: 0;

  transition: all 0.5s;
}
.qxidiv {
  margin-top: 10px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
  position: relative;
}
.qxidiv p:nth-of-type(1) {
  text-align: center;
  font-size: 16px;
}
.qxidiv p:nth-of-type(1) span:nth-of-type(2) {
  color: #ffb232;
  margin-left: 5px;
  font-style: italic;
}
.qxidiv p:nth-of-type(1) span:nth-of-type(3) {
  font-size: 14px;
  color: #ffb232;
}
.qxidiv p:nth-of-type(2) {
  width: 70%;
  text-align: center;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #797d82;
  margin-top: 10px;
}
.asadz {
  position: absolute;
  right: 15px;
  top: 40%;
}
.datediv {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.datediv span {
  display: inline-block;
  height: 100%;
  border-bottom: 1px solid red;
  margin-left: 10px;
  line-height: 50px;
  font-size: 14px;
  color: red;
}
.chaci {
  display: flex;
  margin-top: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eeeeee;
}
.chaci .left {
  margin-left: 10px;
}
.chaci .left p:nth-of-type(2) {
  margin-top: 5px;
  font-size: 12px;
  color: #797d82;
}
.chaci .center {
  margin-left: 30px;
}
.chaci .center p:nth-of-type(2) {
  font-size: 12px;
  color: #797d82;
  display: inline-block;
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}
.chaci .right {
  margin-left: 30px;
}
.chaci .right p {
  line-height: 40px;
}
.chaci .right p span:nth-of-type(1) {
  color: red;
}
.chaci .right p span:nth-of-type(2) {
  display: inline-block;
  width: 50px;
  height: 25px;
  border: 1px solid #ff5f16;
  margin-left: 30px;
  font-size: 12px;
  line-height: 25px;
  text-align: center;
  color: #ff5f16;
  border-radius: 4px;
}
</style>